<template>
  <h3>一个子组件</h3>
  <div class="son">
    <Grandson @son-notify="showMsg"></Grandson>
    <span @click="customClick" class="custom">自定义click事件</span>
  </div>
</template>

<script>
import Grandson from './Grandson'

export default {
  components: {
    Grandson
  },
  emits: ['test', 'click'],
  setup(props, {emit}) {
    function showMsg(msg) {
      alert('@@' + msg)

      emit('test', msg)
    }

    function customClick(){
      let dt = new Date()
      let s  = dt.toLocaleDateString() + ' ' + dt.toLocaleTimeString()
      emit('click', `这只是一个自定义click事件,不触发原生的click事件. -- @ ${s}`)
    }

    return {showMsg, customClick}
  },
}
</script>

<style scoped>
  h3 {
    text-align: center;
  }

  .son {
    background-color: #dfe9fb;
  }

  .custom {
    background-color: #d9bbee;
    margin-left: 10px;
  }
</style>